<script setup>
import { ref, onMounted, computed } from "vue";
import { useUserStore } from "@/stores/user.js";
import Basicsradar from "../../../components/basicsradar.vue";
// import { studentData } from "../left/dataJS/item6Data";
import StudentDialog from "../left/components/studentDialog.vue";
import Dialog from "@/components/Dialog.vue";
import {
  event_info,
  event_details,
  students_periodGender,
  students_town,
  students_studentDetail,
  students_periodStudent,
} from "../../../api";
import CountyDialog from "./components/countyDialog.vue";
import { ElMessage } from "element-plus";
import { toNumber } from "lodash-es";
import BasicsBar from "../../../components/basicsBar.vue";
import IncidentDialog_xq from "../left/components/incidentDialogitem2_xq.vue";
import AiDialog from "./components/AiDialog.vue";

const dataStore = useUserStore();
const props = defineProps(["PerformanceKpi"]);
const emits = defineEmits(["details"]);
const countyVisible = ref(false); // 区县弹窗
const showChed1 = ref(true);
const showChed2 = ref(false);
const showChed3 = ref(false);
const aiVisible = ref(false);
const cxjgVisible = ref(false);
const xbjgVisible = ref(false);
const studentVisable = ref(false);
//
const studentsPeriodGender = ref([]);
const getstudentsTown = ref([]);
const xqca = ref({});
const gxp1show = ref(false);
const studentData = ref([]);
const studentThead = [
  "区县",
  "学前教育",
  "小学",
  "初中",
  "高中",
  "中职",
  "特殊教育",
  "专门学校",
  "高等院校",
  "在校生总计",
];
const switchAddress = (v) => {
  dataStore.switchAddress = v;
  getevent_details();
};
function handleCountyDetails(name, a, b) {
  countyVisible.value = false;
  dataStore.switchAddress = name;
  getevent_details(a);
  emits("details", name, a, b);
  if (name === "石柱土家族自治县" || name === "永川区") {
  } else {
    // ElMessage({
    //   message: `石柱土家族自治县，永川区已接入`,
    //   type: "warning",
    //   plain: true,
    // });
    countyVisible.value = false;
  }
}
const basicsradarData = ref([
  2032046, 1047057, 684043, 1250160, 360485, 777738,
]);
const color = ["#2D80FF", "#FEDE73", "#B66DEA", "#93CBFF", "#2DFFF8"];
const healthXData = computed(() => {
  let arr = [];
  getstudentsTown.value.forEach((v) => {
    arr.push(v.name);
  });
  return arr;
});
const cityStudentsNum = computed(() => {
  let arrnum = 0;
  studentData.value.forEach((v) => {
    arrnum += v.student;
  });
  return arrnum;
});
const healthSeries = computed(() => [
  {
    type: "bar",
    name: "城市",
    data: getstudentsTown.value.map((item) =>
      toNumber(item?.city.replace("%", ""))
    ),
  },
  {
    type: "bar",
    name: "镇区",
    data: getstudentsTown.value.map((item) =>
      toNumber(item?.town.replace("%", ""))
    ),
  },
  {
    type: "bar",
    name: "乡村",
    data: getstudentsTown.value.map((item) =>
      toNumber(item?.village.replace("%", ""))
    ),
  },
  // {
  //   type: "bar",
  //   name: "线性(城市)",
  //   data: [12, 14, 16, 18, 20],
  // },
]);

const healthxbjgSeries = computed(() => [
  {
    type: "bar",
    name: "男",
    data: studentsPeriodGender.value.map((item) => item.boy),
  },
  {
    type: "bar",
    name: "女",
    data: studentsPeriodGender.value.map((item) => item.girl),
  },
]);
const healthxbjgData = computed(() => {
  let arr = [];
  studentsPeriodGender.value?.forEach((v) => {
    arr.push(v.name);
  });
  return arr;
});
onMounted(() => {
  if (dataStore.userType === "02") {
    showData.value = {
      item1: "--",
      item2: "--",
      item3: "--",
      item4: "--",
      item5: "--",
      item6: "--",
      item7: "--",
      item8: "--",
    };
    basicsradarData.value = [];
  } else {
    getevent_details();
    getstudents_periodGender();
    getstudents_town();
    getstudents_studentDetail();
    getstudents_periodStudent();
  }
  if (dataStore.district !== "市级") {
    getevent_details(dataStore.districtCode);
  }
});
// 响应式数据
const originalText = "我是“渝小育”AI助手\n可以向您提供准确的教育统计信息";
const currentText = ref("");
const charIndex = ref(0);
const isTyping = ref(true);
const timeoutId = ref(null);
// 打字效果实现
const typeWriter = () => {
  if (charIndex.value < originalText.length) {
    currentText.value += originalText.charAt(charIndex.value);
    charIndex.value++;
    timeoutId.value = setTimeout(typeWriter, 300);
  } else {
    isTyping.value = false;
    clearTimeout(timeoutId);
  }
};

const showP = ref("市级");
const showData = ref({
  item1: "84",
  item2: "100",
  item3: "664",
  item4: "100",
  item5: "88.8",
  item6: "100",
  item7: "80",
  item8: "100",
});
const aiVisibleChange = () => {
  // timeoutId.value = setTimeout(typeWriter, 500);
  typeWriter();
};
const aiVisibleChange1 = () => {
  currentText.value = "";
  charIndex.value = 0;
};
const getstudents_periodStudent = async () => {
  await students_periodStudent({ year: "2024" }).then((res) => {
    console.log(res, "yyyyyyyyyy");
  });
};
const getstudents_studentDetail = async () => {
  await students_studentDetail({ year: "2024" }).then((res) => {
    if (res.code == 200) {
      studentData.value = res.data;
    }
  });
};
const getstudents_town = async () => {
  await students_town({ year: "2024" }).then((res) => {
    if (res.code == 200) {
      getstudentsTown.value = res.data;
    }
  });
};
const getstudents_periodGender = async () => {
  await students_periodGender({ year: "2024" }).then((res) => {
    if (res.code == 200) {
      studentsPeriodGender.value = res.data;
    }
  });
};
const getevent_details = async (zoningCode) => {
  // "A50000000017676202401007314"
  await event_details({
    appCode: "A50000000017676202401007314",
    zoningCode,
  }).then((res) => {
    console.log(res, "hhhh");
    if (res.code == 200) {
      data.value = res.data;
    }
  });
};
const data = ref([]);
const godd = (v) => {
  event_info({ eventType: "720152", eventNum: v.eventNum }).then((res) => {
    console.log(res, "yuwang res");
    if (res.code == 200) {
      // xqca.value = res.data[0] || {};
      ElMessage({
        message: `已通知-${res.data?.[0]?.orgName || ""}、${
          res.data?.[0]?.opCtyInfo?.[0]?.orgName || ""
        }、${
          res.data?.[0]?.opCtyInfo?.[0]?.opSchInfo?.[0].orgName || ""
        }-相关处置人员。`,
        type: "success",
        plain: true,
      });
    }
  });
};

const goDKdetails = (v) => {
  console.log(v, "yyyy");
  // xqca.value = v
  event_info({ eventType: "720152", eventNum: v.eventNum }).then((res) => {
    console.log(res, "yuwang res");
    if (res.code == 200) {
      xqca.value = res.data[0] || {};
    }
  });
  gxp1show.value = true;
};
const closegxp1 = () => {
  gxp1show.value = false;
};
const gotea = () => {
  location.href = `https://szjy.cqedu.cn:8081/dw/#/CultivateNewTalentsInTheEra`;
};
</script>
<template>
  <div class="info">
    <div class="box1">
      <div class="box1_letf"></div>
      <div class="box1_centre">
        <div class="box1_centre_tit">
          <div class="box1_centre_tit_c1">关键绩效指标（KPI）</div>
          <div class="box1_centre_tit_c" @click="gotea">
            {{ dataStore.switchAddress || "市级" }}
          </div>
        </div>
        <div
          class="box1_centre_c"
          v-show="
            dataStore.userType === '01' && dataStore.switchAddress === '市级'
          "
        >
          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">家庭经济困难学生资助资金</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item1 }}</span>
                  <span class="text-opacity-c9-55-12">亿</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="../../../assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：--</span>
                </div>
              </div>
            </div>
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">本专科新生学籍电子注册...</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item2 }}</span>
                  <span class="text-opacity-c9-55-12">%</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="../../../assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：--</span>
                </div>
              </div>
            </div>
          </div>
          <div class="line-col"></div>
          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">家庭经济困难学生资助人数</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item3 }}</span>
                  <span class="text-opacity-c9-55-12">万人</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="../../../assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：--</span>
                </div>
              </div>
            </div>
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">本专科在校生学年注册完...</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item4 }}</span>
                  <span class="text-opacity-c9-55-12">%</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="../../../assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：--</span>
                </div>
              </div>
            </div>
          </div>
          <div class="line-col"></div>
          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">高中阶段教育完成率</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item5 }}</span>
                  <span class="text-opacity-c9-55-12">%</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="../../../assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：--</span>
                </div>
              </div>
            </div>
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">本专科毕业生学历注册完...</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item6 }}</span>
                  <span class="text-opacity-c9-55-12">%</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="../../../assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：--</span>
                </div>
              </div>
            </div>
          </div>
          <div class="line-col"></div>
          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">中小学教共体覆盖率</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item7 }}</span>
                  <span class="text-opacity-c9-55-12">%</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="../../../assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：--</span>
                </div>
              </div>
            </div>
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">普通高校特殊群体毕业生...</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item8 }}</span>
                  <span class="text-opacity-c9-55-12">%</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="../../../assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：--</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="box1_centre_c"
          v-show="
            dataStore.userType === '02' || dataStore.switchAddress !== '市级'
          "
        >
          <template
            v-for="(group, groupIndex) in [0, 1, 2, 3]"
            :key="'group-' + groupIndex"
          >
            <div class="box1_centre_c_c">
              <template
                v-for="(item, index) in props?.PerformanceKpi"
                :key="index"
              >
                <template
                  v-if="
                    (groupIndex === 0 && index < 2) ||
                    (groupIndex === 1 && index >= 2 && index < 4) ||
                    (groupIndex === 2 && index >= 4 && index < 6)
                  "
                >
                  <div class="box1_centre_c_c_c">
                    <div class="box1_centre_c_c_c_c1">
                      {{ item?.metricsname }}
                    </div>
                    <div class="box1_centre_c_c_c_c2">
                      <div>
                        <span class="text-4b-20 mr-1">{{
                          item?.currentvalue
                        }}</span>
                        <span class="text-opacity-c9-55-12">{{
                          item?.unit
                        }}</span>
                      </div>
                      <div class="flex items-center">
                        <img
                          src="../../../assets/images/target.png"
                          class="target mr--2px"
                        />
                        <span class="text-opacity-c9-55-12"
                          >目标：{{ item?.targetvalue }}</span
                        >
                      </div>
                    </div>
                  </div>
                </template>
              </template>
            </div>
            <div
              class="line-col"
              v-if="groupIndex === 0 || groupIndex === 1 || groupIndex === 2"
            ></div>
          </template>
        </div>
      </div>
      <div class="box1_r"></div>
    </div>

    <div class="info_tit info_tit_bg1">
      <div class="info_tit_left">
        <div class="info_tit_left_t">
          {{
            dataStore.switchAddress !== "市级"
              ? dataStore.switchAddress
              : "全市"
          }}在校生数
        </div>
        <div class="info_tit_left_c" @click="studentVisable = true">
          <span class="text-gradual-yellow-20">{{
            dataStore.switchAddress !== "市级" ? "--" : cityStudentsNum
          }}</span>
          <span class="text-c9-55-12">人</span>
        </div>
        <img src="@/assets/images1/arrowDetail.png" alt="" @click="gotea" />
      </div>
      <!-- @click="gotea" -->
      <!-- @click="studentVisable = true" -->
      <div class="info_tit_right" v-show="dataStore.switchAddress === '市级'">
        <div
          class="info_tit_right_item text-c9-55-14"
          :class="{ info_tit_right_itemChed: showChed1 }"
        >
          <img src="@/assets/images1/Frame111.png" alt="" />
          在校学生结构
        </div>
        <div
          class="info_tit_right_item text-c9-55-14"
          :class="{ info_tit_right_itemChed: showChed2 }"
          @click="cxjgVisible = true"
        >
          <img src="@/assets/images1/Frame112.png" alt="" />
          城乡结构情况
        </div>
        <div
          class="info_tit_right_item text-c9-55-14"
          :class="{ info_tit_right_itemChed: showChed3 }"
          @click="xbjgVisible = true"
        >
          <img src="@/assets/images1/Frame113.png" alt="" />
          性别结构情况
        </div>
      </div>
    </div>

    <div class="info_radar">
      <div class="info_radar_tit">
        <div class="text-c9-55-14">全市在校生数量</div>
        <div
          class="text-c9-55-14 box2_c1_ccc"
          v-show="dataStore.userType === '01'"
        >
          <div class="box2_c1_ccc_c" @click="switchAddress('市级')">
            <img src="../imgs/city.png" alt="" /> 市级
          </div>
          <div class="box2_c1_ccc_c" @click="countyVisible = true">
            <img src="../imgs/county.png" alt="" /> 区县
          </div>
        </div>
      </div>
      <div class="info_radar_c">
        <div
          class="box2-ai"
          @click="aiVisible = true"
          @mouseenter="aiVisibleChange"
          @mouseleave="aiVisibleChange1"
        >
          <div
            :class="{ 'typing-cursor': isTyping, 'box2-ai-c': charIndex > 0 }"
          >
            {{ currentText }}
          </div>
        </div>
        <Basicsradar :data="basicsradarData"></Basicsradar>
      </div>
    </div>

    <div class="info_tit info_tit_bg2"></div>

    <div class="box2">
      <vue3-seamless-scroll
        hover-stop="true"
        :list="data"
        hover="true"
        :limit-scroll-num="2"
        step="0.15"
      >
        <template v-for="(item, index) in data" :key="index">
          <div class="box2_item">
            <div class="box2_item_a jz1 text-c9-55-16">
              <!-- 市-教育优待对象入学-2025030502 -->
              {{ item.eventTitle }}
            </div>
            <div class="box2_item_b jz text-c9-55-14">
              {{ item.happenTime }}
            </div>
            <div class="box2_item_c jz">
              <div
                :class="item.state == '已办结' ? 'btm_c_green' : 'btm_c_yellow'"
              >
                <el-tag size="small"> {{ item.state }}</el-tag>
              </div>
            </div>
            <div class="box2_item_d jz">
              <ElButton link style="color: #4bfff5" @click="goDKdetails(item)"
                >查看</ElButton
              >
              <div class="content_b_r_r_line">|</div>
              <div
                class="dksj_item_c_item"
                @click="godd(item)"
                v-show="item.state == '未办结' ? true : false"
              >
                调度
              </div>
              <div
                class="dksj_item_c_item dksj_item_c_item_color"
                v-show="item.state == '已办结' ? true : false"
              ></div>
              <!-- <ElButton
                link
                style="color: #4bfff5"
                v-show="item.state == '已办结'"
                >调度</ElButton
              > -->
            </div>
          </div>
        </template>
      </vue3-seamless-scroll>
    </div>

    <StudentDialog
      :visible="studentVisable"
      title="全市所有学生"
      :thead="studentThead"
      :data="studentData"
      @close="studentVisable = false"
    ></StudentDialog>

    <Dialog
      :visible="cxjgVisible"
      title="城乡结构情况"
      @close="cxjgVisible = false"
    >
      <div class="D_bar">
        <BasicsBar
          :xData="healthXData"
          :series="healthSeries"
          :color="color"
          :legend="{ right: 70, top: 2 }"
          :grid="{
            top: 24,
            bottom: 21,
            left: 40,
            right: 10,
          }"
          yUnit="%"
        ></BasicsBar>
      </div>
    </Dialog>

    <Dialog
      :visible="xbjgVisible"
      title="性别结构情况"
      @close="xbjgVisible = false"
    >
      <div class="D_bar">
        <BasicsBar
          :xData="healthxbjgData.reverse()"
          :series="healthxbjgSeries"
          :color="color"
          :legend="{ right: 70, top: 2 }"
          :grid="{
            top: 24,
            bottom: 21,
            left: 40,
            right: 10,
          }"
          yUnit="%"
        ></BasicsBar>
      </div>
    </Dialog>

    <IncidentDialog_xq
      :visible="gxp1show"
      :title="'事件详情'"
      :thead="thead"
      :data="xqca"
      @close="closegxp1"
    ></IncidentDialog_xq>

    <AiDialog
      :visible="aiVisible"
      title="对话框"
      @close="aiVisible = false"
    ></AiDialog>

    <countyDialog
      :visible="countyVisible"
      title="区县清单"
      @close="
        () => {
          countyVisible = false;
          // actived = type;
        }
      "
      @details="handleCountyDetails"
    >
    </countyDialog>
  </div>
</template>

<style lang="less" scoped>
.dksj_item_c_item {
  width: 50%;
  height: 100%;
  cursor: pointer;
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
  font-weight: normal;
  font-size: 14px;
  color: #4bfff5;
  line-height: 12px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dksj_item_c_item_color {
  color: #ffffff;
}
.D_bar {
  width: 100%;
  height: 100%;
  padding: 10% 10%;
}
.info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .info_tit {
    width: 100%;
    height: 44px;
    margin-top: 12px;

    display: flex;
    .info_tit_left {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
      .info_tit_left_t {
        margin-left: 10px;
        background-image: linear-gradient(#ffffff 0%, #ffc421 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-size: 24px;
        font-weight: bold;
      }
      .info_tit_left_c {
        position: absolute;
        right: 76px;
        cursor: pointer;
      }
      //   flex-direction: row-reverse; /* 子元素从右向左排列 */
      img {
        width: 16px;
        height: 14px;
        position: absolute;
        right: 30px;
        cursor: pointer;
      }
    }
    .info_tit_right {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px 0 22px;
      .info_tit_right_item {
        width: 130px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(@/assets/images1/Rectangle3.png) no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        img {
          width: 14px;
          height: 14px;
          margin-right: 4px;
        }
      }
      .info_tit_right_item:hover {
        background: url(@/assets/images1/Rectangle33.png) no-repeat;
        background-size: 100% 100%;
      }
      .info_tit_right_itemChed {
        background: url(@/assets/images1/Rectangle33.png) no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .info_tit_bg1 {
    background: url(@/assets/images1/item5.png) no-repeat;
    background-size: 100% 100%;
  }
  .info_tit_bg2 {
    background: url(@/assets/images1/item6.png) no-repeat;
    background-size: 100% 100%;
  }
  .box1 {
    width: 100%;
    height: 11.5rem;
    background: rgba(9, 54, 100, 0.3);
    display: flex;
    position: relative;
    .box1_letf {
      width: 2.8125rem;
      height: 100%;
      // border: 1px gold solid;
      background: url("@/assets/images/kpiLeftArrowBg.png") no-repeat;
      display: flex;
      align-items: center;
      justify-content: end;
      // position: absolute;
      img {
        width: 50%;
      }
    }
    .box1_centre {
      width: 53.125rem;
      // flex: 1;
      height: 100%;
      padding: 0 1rem;

      .box1_centre_tit {
        width: 100%;
        height: 2.625rem;
        // border: 1px gold solid;
        background: url("@/assets/images/kpiTitleBg.png") no-repeat;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "Alimama ShuHeiTi-Bold";
        font-size: 1.375rem;
        font-weight: bold;
        .box1_centre_tit_c1 {
          background-image: linear-gradient(#ffffff 0%, #92deff 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }

        .box1_centre_tit_c {
          // width: 44px;
          height: 1.25rem;
          background-color: #32d980;
          font-family: "Alibaba PuHuiTi 3.0-85 Bold";
          color: #000;
          font-size: 0.875rem;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
      }
      .box1_centre_c {
        width: 100%;
        height: 8.875rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0;
        gap: 14px;
        .box1_centre_c_c {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 7px;
          // border: 1px red solid;
          .box1_centre_c_c_c {
            flex: 1;
            display: flex;
            flex-direction: column;
            // justify-content: space-between;
            gap: 4px;
            .box1_centre_c_c_c_c1 {
              width: 110%;
              height: 1.5rem;
              background: url(../../../assets/images/kpiCenBg.png) no-repeat;
              padding-left: 0.375rem;
              font-size: 14px;
              color: #c9e9f8;
              font-family: "Alibaba PuHuiTi 2.0-75 SemiBold";
              display: flex;
              align-items: center;
            }
            .box1_centre_c_c_c_c2 {
              width: 100%;
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
    }
    .box1_r {
      width: 2.8125rem;
      height: 100%;
      // border: 1px gold solid;
      background: url("@/assets/images/kpiRightArrowBg.png") no-repeat;
      display: flex;
      align-items: center;
      // position: absolute;
      // top: 0;
      // right: 0;
      img {
        width: 50%;
      }
    }
  }
  .info_radar {
    width: 100%;
    height: 442px;
    // border: 1px red solid;
    margin-top: 8px;
    .info_radar_tit {
      width: 100%;
      height: 34px;
      //   border: 1px gold solid;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 12px 0 12px;
    }
    .info_radar_c {
      width: 100%;
      height: 408px;
      // border: 1px gold solid;
      background: rgba(9, 54, 100, 0.3);
      border-radius: 0px 0px 0px 0px;
      position: relative;
      .box2-ai {
        width: 100px;
        height: 110px;
        background: url(@/assets/images/AI.gif) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 8px;
        left: 24px;
        cursor: pointer;
        // border: 1px solid saddlebrown;
        z-index: 9;
        // &:hover {
        //   background: url(../../assets/images/AIHover.png) no-repeat;
        //   background-size: 100% 100%;
        // }
        .box2-ai-c {
          width: 261px;
          height: 70px;
          background: linear-gradient(#091e3c 0%, #114271 100%);
          padding: 0 0 0 8px;
          border: 1px solid;
          border-image: linear-gradient(
              180deg,
              rgba(108, 147, 174, 0.7),
              rgba(194, 220, 242, 0.9),
              rgba(106, 137, 177, 0.75)
            )
            1 1;
          border-radius: 4px;
          font-size: 16px;
          color: #4bfff5;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: -50%;
          right: -75%;
          &:after {
            content: "";
            display: block;
            border: 10px solid;
            position: absolute;
            bottom: -20px;
            right: 40px;
            width: 0;
            height: 0;
            border-color: #0f467a transparent transparent transparent;
          }
        }
        @keyframes cursor-blink {
          0% {
            border-color: transparent;
          }
          50% {
            border-color: #333;
          }
          100% {
            border-color: transparent;
          }
        }

        .typing-cursor {
          border-left: 2px solid #333;
          animation: cursor-blink 1s infinite;
        }
      }
    }
  }
  .box2 {
    width: 100%;
    height: 205px;
    // border: 1px red solid;
    margin-top: 8px;
    overflow: hidden;
    .box2_item {
      width: 100%;
      height: 40px;
      margin-bottom: 2px;
      display: flex;
      &:nth-child(2n-1) {
        background: rgba(255, 255, 255, 0.05);
      }
      &:nth-child(2n) {
        background: rgba(255, 255, 255, 0.1);
      }
      .box2_item_a {
        width: 40%;
        height: 100%;
        padding: 0 0 0 12px;
      }
      .box2_item_b {
        width: 25%;
        height: 100%;
      }
      .box2_item_c {
        width: 15%;
        height: 100%;
      }
      .box2_item_d {
        width: 20%;
        height: 100%;

        display: flex;
        align-items: center;
      }
    }
  }
}
.jz1 {
  display: flex;
  align-items: center;
}
.jz {
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .btm_c_yellow {
  .el-tag.el-tag--primary {
    background: rgba(244, 171, 50, 0.2);
    border-radius: 0.125rem;
    border: 1px solid #f4ab32;
    color: #ffffff;
    // min-width: 4rem;
  }
}

::v-deep .btm_c_green {
  .el-tag.el-tag--primary {
    background: rgba(51, 220, 25, 0.2);
    border-radius: 0.125rem;
    border-color: #33dc19;
    color: #ffffff;
  }
}
.content_b_r_r_line {
  color: rgba(201, 233, 248, 0.6);
  font-size: 0.75rem;
  margin: 0 0.375rem;
}
.box2_c1_ccc {
  width: 160px;
  height: 28px;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  .box2_c1_ccc_c {
    width: 78px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(20, 45, 104, 0.5);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid;
    border-image: linear-gradient(
        93deg,
        rgba(45, 128, 255, 0.2),
        rgba(37, 145, 207, 1),
        rgba(27, 77, 153, 0.4)
      )
      1 1;
    font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
    font-weight: normal;
    font-size: 14px;
    color: #c9e9f8;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    cursor: pointer;
    img {
      margin-right: 2px;
    }
  }
  .box2_c1_ccc_c:hover {
    color: #ffffff;
  }
}
</style>